<template>
  <div>
    <!-- 两种实现方式的原理都是发出更新事件令父组件传入的相应属性更新，父组件传入的值更新那么内部的值自然也就更新，注意props的值在子组件内部仍然没有主动改变！ -->
    <!-- 一般方式实现原理：当输入更新时发出更新事件令父组件传入的相应属性更新，那么此时组件绑定的value从外部更新 -->
    <input
      :value="modelValueA"
      @input="$emit('update:modelValueA', $event.target.value)"
    />

    <!-- 计算属性实现原理：当输入更新时计算属性更新发出更新事件令父组件传入的相应属性更新 -->
    <input v-model="modelValueBComputed"/>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'TwoWayBindingChildren',
  props: ['modelValueA', 'modelValueB', 'modelValueBModifiers'],
  emits: ['update:modelValueA', 'update:modelValueB'],
  computed: {
    modelValueBComputed: {
      get() {
        // 查看自定义修饰符对象
        console.log('自定义修饰符', this.modelValueBModifiers); // {customize: true}
        return this.modelValueB;
      },
      set(value) {
        this.$emit('update:modelValueB', value);
      },
    }
  },
});
</script>

<style scoped>

</style>